<template>
  <div class="reward">
    <ul class="reward-wrapper">
      <li v-for="(item, index) in allRank" :key="index">
        <div class="avatar-wrapper">
          <img class="avatar" :src="item.face" alt="avatar">
        </div>
        <span class="username">{{ item.username }}</span>
        <span class="userId">{{ item.mid | addID }}</span>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'Reward',
  props: {
    allRank: Array
  },
  data () {
    return {
      abc: 1235
    }
  },
  filters: {
    addID (val) {
      return ('ID:' + val)
    }
  }
}
</script>

<style lang="stylus" scoped>
  @import '~styles/varibles.styl'
  @import '~styles/mixins.styl'
  $avatarSize = .9rem
  .reward
    overflow hidden
    height 0
    padding-bottom 113.7%
    background-image url('~img/reward-bg.png')
    background-size 100%
    .reward-wrapper
      display flex
      flex-wrap wrap
      width 68.6%
      height 5rem
      margin 2rem auto 0
      li
        width 33.3%
        text-align center
        .username
        .userId
          display block
          ellipsis()
        .avatar-wrapper
          width $avatarSize
          height $avatarSize
          margin auto
          .avatar
            width 100%
            height 100%
            border-radius(50%)
        .username
          color $bgColor
          font-size .18rem
          line-height .28rem
          margin-top .1rem
        .userId
          color #999
          font-size .16rem
</style>
